<template>
	<view class="email" :class="APPTheme">
		<uni-nav-bar fixed status-bar :left-icon="isCheckbox?'':'back'" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" :background-color="APPTheme=='theme-light'?'#ffffff':'#000000'" @clickRight="clickRightclose" @clickLeft="clickLeftback">
			<view slot="left" v-if="isCheckbox">
				<checkbox-group ref="checkboxGroup" @change="checkboxChangeAll">
					<label>
						<checkbox value="全选" :checked="checkbox.isSelectAll" style="transform: scale(0.9);" color="red"/>全选
					</label>
				</checkbox-group>
			</view>
			<view class="nav-bar-center" v-if="!isCheckbox">
				<ms-dropdown-menu>
					<ms-dropdown-item v-model="shared.dropdown" :title="drawer.mailBoxName" :list="shared.list" :APPTheme="APPTheme" @input="inputDropdown"></ms-dropdown-item>
				</ms-dropdown-menu>
			</view>
			<view slot="right" class="nav-bar-right">
				<view v-if="isCheckbox">
					取消
				</view>
				<view v-else>
					<uni-icons v-if="!appear" @click="searchFn({type:'input'})" type="search" size="20" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" style="margin-right: 5px;font-weight: bold;"></uni-icons>
					<uni-icons type="gear-filled" size="20" :color="APPTheme=='theme-light'?'#000000':'#ffffff'"></uni-icons>
				</view>
			</view>
		</uni-nav-bar>
		<view class="email-center" :class="APPTheme">
			<lz-input icon="search" :size="18" rightText="全部已读" placehold="搜索邮件" class="lz-input" @click="searchFn"></lz-input>
			<checkbox-group @change="checkboxChange" >
				<uni-swipe-action >
					<uni-swipe-action-item @click="swipeActionFn($event,item)"  :options="swipe.options" :disabled="isCheckbox||swipe.disabled" v-for="(item,index) in checkbox.list" :key="index">
						<label class="center-list-item theme-bg theme-bg-active theme-border-bottom-auto" @longtap="longtapCheck" @tap="navigateToFn(item)">
							<view class="item-left" v-if="isCheckbox">
								<checkbox :value="item.id" :checked="item.checked"/>
							</view>
							<view class="item-left" v-else>
								<view class="icon">{{item.sendUser&&item.sendUser.slice(item.sendUser.length-2,item.sendUser.length)}}</view>
								<u-badge :is-dot="true" type="warning" v-show="drawer.mailBoxId==1&&item.isRead==0"></u-badge>
							</view>
							<view class="item-right">
								<view class="item-right-top">
									<view class="top-title lz-ellipsis-1">{{item.sendUser }}</view>
									<view class="top-date">{{$lizhao.timeFrom(new Date(item.sendTime).getTime(),'yyyy-mm-dd hh:MM:ss')}}</view>
								</view>
								<view class="item-right-center lz-ellipsis-1">
									{{item.mailSubject}}
								</view>
								<view class="item-right-bottom lz-ellipsis-1">
									{{item.mailContent||item.htmlContent}}
								</view>
							</view>
						</label>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</checkbox-group>
			<uni-load-more v-if="checkbox.list.length!=0" :status="more.status" :icon-size="16" :content-text="more.contentText" class="theme-bg"/>
			<u-empty text="暂无数据" mode="data" v-if="checkbox.list.length==0&&more.status=='noMore'" :margin-top="250"></u-empty>
		</view>
		
		<view class="email-foot theme-bg">
			<view class="foot1-warp theme-border-top-auto"  v-if="!isCheckbox">
				<view class="foot-left" @click="showdrawer">
					<uni-icons type="settings" color="#0081c2" size="20"></uni-icons>
				</view>
				<view class="foot-center"></view>
				<view class="foot-right" @click="writeEmailFn">
					<uni-icons type="compose" color="#0081c2" size="20"></uni-icons>
				</view>
			</view>
			<view class="foot-list theme-border-top-auto" v-else>
				<view class="foot-list-item theme-bg-active" v-for="(item,index) in footAction.list" :key="index" @click="footActionFn(item)">
					<view class="iconfont" :class="checkbox.selected.length>0?item.icon:item.icon+' iconFontColor'"></view>
					<view class="text">{{item.text}}</view>
				</view>
			</view>
		</view>
		
		<uni-drawer ref="unidrawer" :width="250" @change="uniDrawerFn">
			<view style="height: 100%;" :class="APPTheme">
				<lz-list :list="drawer.mailbox" title="邮箱文件夹" active-color="rgba(0,122,255,0.5)" :activeId="drawer.mailBoxId" style="padding-top: 30px;" @click="mailBoxFn"></lz-list>
				<view class="progress">
					<text>磁盘已用：</text>
					<!-- <u-circle-progress active-color="#2979ff" :percent="drawer.percent" width="130" border-width="12" bg-color="rgba(0,0,0,0)" >
						<view class="u-progress-content">
							<text class='u-progress-info'>{{drawer.percent}}%</text>
						</view>
					</u-circle-progress> -->
					<u-line-progress active-color="#2979ff" :percent="drawer.percent" :striped="true" :striped-active="true"></u-line-progress>
				</view>
				<lz-list :list="drawer.follow" title="我新建的文件夹" active-color="rgba(0,122,255,0.5)" :activeId="drawer.mailBoxId" title-icon="plus" :icon-size="22" icon-color="#0088fe" @click="mailBoxFn" height="680rpx"></lz-list>
			</view>
		</uni-drawer>
		<!-- 对话框 -->
		<uni-popup ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" title="新建文件夹" placeholder="请输入文件夹名称" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 移动到 -->
		<u-popup ref="moveShow" mode="bottom" :border-radius='40' closeable @change="changeUPopup">
			<view class="u-popup" >
				<view class="u-popup-top">移动到</view>
				<lz-list :list="drawer.mailbox" title="邮箱文件夹" active-color="rgba(0,122,255,0.5)" :disabledId="drawer.mailBoxId" @click="moveFn" ></lz-list>
				<lz-list :list="drawer.follow" title="我新建的文件夹" active-color="rgba(0,122,255,0.5)" :activeId="drawer.mailBoxId" @click="moveFn" height="380rpx"></lz-list>
			</view>
		</u-popup>
		<!-- 删除文件夹 -->
		<u-popup ref="deletShow" mode="bottom" :border-radius='40' closeable>
			<view class="u-popup">
				<view class="u-popup-top">删除文件夹</view>
				<view class="u-popup-seve" v-if="delet.ids.length!=0" @click="deleteBoxFn">确认</view>
				<scroll-view scroll-y="true" style="height:72vh">
					<checkbox-group @change="checkboxChangeDel" >
						<label v-for="(item,index) in drawer.follow" :key="index" class="center-list-item theme-bg theme-bg-active theme-border-bottom-auto">
							<view class="item-left">
								<checkbox :value="item.id"/>
							</view>
							<view class="item-right">
								<view  class="iconfont icon-wenjianjia1"></view>
								<view>{{item.name}}</view>
							</view>
						</label>
					</checkbox-group>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
let that,timer,observer = null;//监听输入框是否可见
import {
	mapGetters,
	mapActions
} from 'vuex'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
export default {
	components:{
		msDropdownMenu,
		msDropdownItem,
		uniPopupDialog,
	},
	data() {
		return {
			isCheckbox:false,//是否显示多选
			appear:false,//当前输入框是否在可视区域内
			//选择类型邮箱
			shared: {
				list: [{
						text: '全部',
						value: 0,
						icon:'icon-quanbu'
					},
					{
						text: '未读',
						value: 1,
						icon:'icon-weidu'
					},
					{
						text: '附件',
						value: 2,
						icon:'icon-fujian'
					},
				],
				dropdown:0,
				mark:'',
			},
			//抽屉
			drawer:{
				mailBoxId:1,//当前选择的
				mailBoxName:'收件箱',//当前选择的
				//邮箱文件夹
				mailbox:[{
					name:'收件箱',
					mailBoxId:1,
					id:1,
					icon:'icon-shoujianxiang',
					color:'#0088fe'
				},
				{
					name:'草稿箱',
					mailBoxId:5,
					id:5,
					icon:'icon-caogaoxiang',
					color:'#ff7c00'
				},
				{
					name:'发件箱',
					mailBoxId:4,
					id:4,
					icon:'icon-yifasong',
					color:'#15bc84'
				},
				{
					name:'已删除',
					mailBoxId:6,
					id:6,
					icon:'icon-yishanchu',
					color:'#ff9f00'
				},
				{
					name:'红旗邮箱',
					icon:'icon-genjin',
					mailBoxId:3,
					id:3,
					color:'#ff3908'
				},
				{
					name:'星标邮箱',
					icon:'icon-guanzhu',
					mailBoxId:2,
					id:2,
					color:'#0088fe'
				}
				],
				//我新建的文件夹
				follow:[
				// {
				// 	name:'跟进事项',
				// 	id:"022",
				// 	icon:'icon-wenjianjia1',
				// 	color:'#ff7c00'
				// }
				],
				//进度条
				percent:0
			},
			checkbox:{
				isSelectAll:false,//是否全选
				list:[],
				selected:[]//已选择
			},
			page:{
				pageNo:1,
				pageSize:10,
				count:0,//总条
				toal:0,//总页数
			},
			more:{
				status: 'loading',//loading 的状态，可选值：more（loading前）、loading（loading中）、noMore（没有更多了）
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			},
			swipe:{
				disabled:false,//是否禁止滑动
				options:[
					{
						text: '移动',
						style: {
							backgroundColor: '#007aff'
						}
					}, {
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			},
			footAction:{
				list:[
				{
					text:'标星标',
					icon:'icon-guanzhu',
				},
				{
					text:'标红旗',
					icon:'icon-hongqi',
				},
				{
					text:'删除',
					icon:'icon-yishanchu',
				},
				{
					text:'移动到',
					icon:'icon-zhuanfa',
				}]
			},
			move:{//移动文件夹
				ids:''//要移动的id
			},
			delet:{//删除文件夹
				ids:[]
			}
			
		}
	},
	computed: {
		...mapGetters(['APPTheme', 'userInfo', 'api']),
	},
	onLoad() {
		that = this
		//获取邮箱
		that.getinitlstFn()
		// 监听刷新
		uni.$off('refresh_email_vue')
		uni.$on('refresh_email_vue',res=>{
			if(that.drawer.mailBoxId==1){
				//初始化参数
				that.initDataFn()
			}
		})
		//监听侧边点击
		uni.$on('click-lz-list',(res)=>{
			console.log(res);
			that.mailBoxFn(res)
		})
		
	},
	onShow() {
		//设置主题颜色
		that.GLOBAL.setThemeColor(that.APPTheme)
	},
	onUnload() {
		if (observer) {//取消监听输入框
			observer.disconnect()
		}
	},
	onReady() {
		//监听输入框是否在视图中可见
		that.IntersectionObserver()
	},
	onPullDownRefresh() {
		console.log('refresh');
		//初始化参数
		that.initDataFn()
		
	},
	//页面滚动
	onPageScroll(e){
		// //禁止左右滑动
		// that.swipe.disabled=true
		// clearTimeout(timer)
		// timer=setTimeout(()=>{
		// 	that.swipe.disabled=false
		// },500)
	},
	//物理返回
	onBackPress(event){
		console.log(event);
	},
	onReachBottom() {
		console.log('触底了');
		if(this.more.status=='noMore'){
			return
		}
		this.more.status = 'loading';
		//获取邮箱
		that.getinitlstFn()
	},
	methods: {
		//确认删除文件夹
		deleteBoxFn(){
			uni.showModal({
				title: '提示',
				content: '是否永久删除当前已选文件夹及文件夹内容',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if(res.confirm){
						let req={
							ids:that.delet.ids.join(',')
						}
						that.GLOBAL.doGet(that.api.GLOBAL_rest_vmail_mailBox_deleteMailBox,req).then(res=>{
							if(res.code=='0'){
								uni.showToast({
									title:res.data.msg,
									icon:'none'
								});
								that.$refs.deletShow.close()
								//获取新建文件夹列表
								that.getmailBoxlist()
							}
						})
					}
					
				},
				fail: () => {},
				complete: () => {}
			});
		},
		//选择删除文件夹
		checkboxChangeDel(e){
			that.delet.ids=e.detail.value
		},
		//获取新建文件夹列表
		getmailBoxlist(){
			that.GLOBAL.doGet(that.api.GLOBAL_rest_vmail_mailBox_listBox,{}).then(res=>{
				if(res.code=='0'){
					that.drawer.follow=res.data.map(data=>{
						return {
							name:data.boxName,
							icon:'icon-wenjianjia1',
							color:'#15bc84',
							...data,
						}
					})
				}
			})
		},
		//获取磁盘空间
		getPercent(){
			that.GLOBAL.doGet(that.api.GLOBAL_rest_vmail_mail_getPercent,{}).then(res=>{
				if(res.code=='0'&&res.data.flag){
					that.drawer.percent=res.data.percent.slice(0,res.data.percent.length-1)
				}
			})
		},
		//底部操作菜单
		footActionFn(e){
			console.log(e);
			if(that.checkbox.selected.length==0){
				return
			}
			let arr=that.checkbox.selected.map((res)=>{
				return res.id
			})
			let ids=arr.join(',')
			if(e.text=='删除'){
				if(that.drawer.mailBoxId==6){//草稿箱删除彻底删除
					that.deleteEmail(ids,'彻底删除')
				}else{//逻辑删除
					//删除邮件
					that.deleteEmail(ids)
				}
			}else if(e.text=='移动到'){
				let ids=that.checkbox.selected.map(res=>{
					return res.id
				})
				that.move.ids=ids.join(',')
				that.$refs.moveShow.open()
				//获取新建文件夹列表
				that.getmailBoxlist()
			}else if(e.text=='标星标'||e.text=='标红旗'){
				//加星标或加红旗
				let ids=that.checkbox.selected.map(res=>{
					return res.id
				})
				that.move.ids=ids.join(',')
				let req={
					type:'listItem',
					center:{
						id:e.text=='标星标'?2:3
					}
				}
				that.moveFn(req)
			}
		},
		//滑动点击
		swipeActionFn(e,item){
			console.log(e,item)
			if(e.index==0){//移动
				that.move.ids=item.id
				setTimeout(()=>{
					that.$refs.moveShow.open()
				},100)
				//获取新建文件夹列表
				that.getmailBoxlist()
			}else if(e.index==1){//删除
				if(that.drawer.mailBoxId==6){//草稿箱删除彻底删除
					that.deleteEmail(item.id,'彻底删除')
				}else{//逻辑删除
					//删除邮件
					that.deleteEmail(item.id)
				}
			}
		},
		//删除邮件
		deleteEmail(ids,type=''){
			console.log(type);
			let url=''
			if(type=='彻底删除'){
				url=that.api.GLOBAL_rest_vmail_mail_deleteMail
			}else{
				url=that.api.GLOBAL_rest_vmail_mail_delete
			}
			that.GLOBAL.doGet(url,{ids}).then(res=>{
				if(res.code=='0'){
					uni.showToast({
						title: res.data.msg,
						icon:'none'
					});
					//初始化参数
					that.initDataFn()
					
					that.isCheckbox=false
					that.checkbox.isSelectAll=true
					//取消全选
					that.checkboxChangeAll()
				}
			})
		},
		//点击搜索
		searchFn(e){
			if(e.type=='input'){
				uni.navigateTo({url: '../searchEmail/searchEmail'});
			}else if(e.type=='text'&&e.value=='全部已读'){
				console.log('点击已读');
				uni.showModal({
					title: '全部标记已读',
					content: '将本文件夹下的未读邮件全部标记为已读状态？',
					success: res => {
						if(res.confirm){
							//标记全部已读
							that.isAllRead()
						}
						// GLOBAL_rest_vmail_mail_isAllRead
					},
					fail: () => {},
					complete: () => {}
				});
			}
			
		},
		//标记全部已读
		isAllRead(){
			let req={
				mailBoxId:that.drawer.mailBoxId
			}
			that.GLOBAL.doGet(that.api.GLOBAL_rest_vmail_mail_isAllRead,req).then(res=>{
				if(res.code=='0'){
					uni.showToast({
						title: res.data,
						icon:'none'
					});
					//初始化参数
					that.initDataFn()
				}
			})
		},
		//初始化参数
		initDataFn(){
			that.more.status = 'loading'
			that.checkbox.list=[]
			that.page.pageNo=1
			//获取邮箱
			that.getinitlstFn()
		},
		//监听输入框是否在视图中可见
		IntersectionObserver(){
			observer = uni.createIntersectionObserver(this);
			observer.relativeTo('.email').observe('.lz-input', (res) => {
				if (res.intersectionRatio > 0 && !this.appear) {
					this.appear = true;
				} else if (!res.intersectionRatio > 0 && this.appear) {
					this.appear = false;
				}
			})
		},
		//切换邮箱类型
		mailBoxFn(item){
			console.log('切换邮箱类型',item);
			if(item.type=='listItem'){//点击的是列表
				if(item.center.boxName){//点击文件夹
					that.drawer.mailBoxId=item.center.id
				}else{//点击邮箱
					that.drawer.mailBoxId=item.center.mailBoxId
				}
				that.drawer.mailBoxName=item.center.name
				that.$refs.unidrawer.close()
				//初始化参数
				that.initDataFn()
			}else if(item.type=='icon'){
				console.log('新建文件夹');
				if(item.center=='minus'){//删除文件夹
					that.$refs.deletShow.open()
				}else{
					that.$refs.dialogInput.open()
				}
				
			}
		},
		uniDrawerFn(e){
			//#ifdef APP-PLUS
			that.$lizhao.refresh(!e)//动态开启关闭下拉刷新
			//#endif
		},
		changeUPopup(e){
			//#ifdef APP-PLUS
			that.$lizhao.refresh(!e)//动态开启关闭下拉刷新
			//#endif
		},
		//移动到
		moveFn(item){
			console.log('移动到',item);
			if(item.type=='listItem'){
				let req={
					mailBoxId:item.center.id,//移动到文件夹id
					ids:that.move.ids//要移动的文件
				}
				
				that.GLOBAL.doGet(that.api.GLOBAL_rest_vmail_mail_move,req).then(res=>{
					if(res.code=='0'){
						uni.showToast({
							title: res.data.msg,
							icon:'none'
						});
						//初始化参数
						that.initDataFn()
						that.$refs.moveShow.close()
					}
				})
				
			}
		},
		//查看详情
		navigateToFn(item){
			console.log(item.id,that.drawer.mailBoxId);
			if(that.drawer.mailBoxId==5){
				uni.navigateTo({
					url: '../writeEmail/writeEmail?id='+item.id+'&mailBoxId='+that.drawer.mailBoxId+'&name=草稿',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				return
			}
			if(!that.isCheckbox){
				uni.navigateTo({
					url: '../seeEmail/seeEmail?id='+item.id+'&mailBoxId='+that.drawer.mailBoxId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
			
		},
		//获取邮箱
		getinitlstFn(){
			let req={
				mailBoxId:that.drawer.mailBoxId,
				pageNo:that.page.pageNo,
				pageSize:that.page.pageSize,
				mark:that.shared.dropdown
			}
			that.GLOBAL.doGet(that.api.GLOBAL_rest_vmail_mail_list,req).then(res=>{
				uni.stopPullDownRefresh();
				if(res.code=='0'){
					that.checkbox.list=that.checkbox.list.concat(res.data) 
					if(that.checkbox.list.length==0){//如果数据没有就没有全选
						that.isCheckbox=false
					}
					that.page.count=res.count
					that.page.toal=Math.ceil(res.count/that.page.pageSize)
					//判断当前是否到底
					that.setpageFn()
				}else{
					that.more.status = 'noMore';
				}
			})
		},
		setpageFn(){
			console.log('当前页',that.page.pageNo);
			console.log('总页数',that.page.toal);
			if(that.page.pageNo>that.page.toal||that.page.pageNo==that.page.toal){//到底了
				that.more.status = 'noMore';
			}else{
				that.page.pageNo++
			}
		},
		//点击确认新建文件夹
		dialogInputConfirm(fn,item){
			console.log(item);
			if(item.length>16){
				that.$refs.dialogInput.close()
				uni.showToast({
					title: '文件名最多16个字符',
					icon:'none'
				});
				return
			}
			let req={
				boxName:item,
			}
			that.GLOBAL.doGet(that.api.GLOBAL_rest_vmail_mailBox_save,req).then(res=>{
				if(res.code=='0'){
					uni.showToast({
						title: res.data.msg,
						icon:'none'
					});
					that.$refs.dialogInput.close()
					//获取新建文件夹列表
					that.getmailBoxlist()
				}
			})
			
		},
		//新建邮件
		writeEmailFn(){
			uni.navigateTo({url: '../writeEmail/writeEmail'});
		},
		//显示抽屉
		showdrawer(){
			//获取新建文件夹列表
			that.getmailBoxlist()
			//获取磁盘空间
			that.getPercent()
			that.$refs.unidrawer.open()
		},
		inputDropdown(e){
			console.log(e);
			that.checkbox.list=[]
			//获取邮箱
			that.getinitlstFn()
		},
		//返回
		clickLeftback(){
			if(!that.isCheckbox){
				uni.navigateBack({
					delta: 1
				});
			}
			
		},
		//点击导航栏右侧
		clickRightclose(){
			if(that.isCheckbox){//取消
				that.isCheckbox=false
				that.checkbox.isSelectAll=true
				//取消全选
				that.checkboxChangeAll()
			}else{//点击设置
				
			}
		},
		//全选
		checkboxChangeAll(){
			if(that.checkbox.isSelectAll){//取消全选
				that.$set(that.checkbox,'isSelectAll',false)
				console.log('取消全选');
				that.checkbox.list.map(res=>{
					that.$set(res,'checked',false)
				})
			}else{//全选
				that.$set(that.checkbox,'isSelectAll',true)
				console.log('全选');
				that.checkbox.list.map(res=>{
					that.$set(res,'checked',true)
				})
			}
			//获取已选择的
			that.getSelected()
		},
		// 多选
		checkboxChange(e) {
			const values = e.detail.value;
			console.log(e.detail);
			for (var i = 0;i < that.checkbox.list.length;i++) {
				const item = that.checkbox.list[i]
				if(values.indexOf(item.id) >= 0){
					that.$set(item,'checked',true)
				}else{
					that.$set(item,'checked',false)
				}
			}
			//检测是否全部选中
			that.testIsAll()
			//获取已选择的
			that.getSelected()
		},
		//获取已选择的
		getSelected(){
			let arr=that.checkbox.list.filter(res=>{
				if(res.checked==true){
					return res
				}
			})
			console.log('已选择',arr);
			that.checkbox.selected=arr
		},
		//检测是否全部选中
		testIsAll(){
			let arr=that.checkbox.list.filter(res=>{
				if(res.checked==false){
					return res
				}
			})
			if(arr.length>0){
				that.$set(that.checkbox,'isSelectAll',false)
			}else{
				that.$set(that.checkbox,'isSelectAll',true)
			}
		},
		longtapCheck(){
			that.isCheckbox=true
		}
		
	}
};
</script>

<style scoped lang="scss">
.email{
	height: 100%;
	.nav-bar-center{
		display: flex;align-items: center;justify-content: center;text-align: center;flex: 1;
	}
	.nav-bar-right{
		text-align: right;
	}
	.email-center{
		box-sizing: border-box;padding-bottom: 45px;
		.lz-input{
			padding:10px 15px;z-index: 100;
		}
		.center-list-item{
			display: flex;padding:5px;align-items: center;line-height: 20px;box-sizing: border-box;width: 100%;
			.item-left{
				width:40px;height: 40px;padding: 10px;display: flex;align-items: center;justify-content: center;position: relative;
				.icon{
					width:100%;height: 100%;border-radius:50%;background-color: #0794ff;display: flex;justify-content: center;align-items: center;font-size: 12px;color: #ffffff;
				}
			}
			.item-right{
				padding: 5px;font-size: 14px;box-sizing: border-box;width: 600rpx;
				.item-right-top{
					display: flex;justify-content: space-between;
					.top-date{
						color: #888;font-size: 10px;
					}
				}
				.item-right-bottom{
					color: #888;font-size: 12px;
				}
			}
		}
	}
	.email-foot{
		position: fixed;bottom: 0;left: 0;right: 0;
		.foot1-warp{
			display: flex;justify-content: space-between;box-sizing: border-box;padding:10px 20px;
		}
		.foot-list{
			display: flex;font-size: 12px;justify-content: space-between;width: 100%;padding: 5px 15px;box-sizing: border-box;
			.foot-list-item{
				display: flex;flex-direction: column;align-items: center;padding:2px 5px;
				.text{
					color: #888;
				}
				.icon-weidu1{
					color: #007AFF;
				}
				.icon-guanzhu{
					color: #ff7c00;
				}
				.icon-hongqi{
					color: red;
				}
				.icon-yishanchu{
					color: #15bc84;
				}
				.icon-zhuanfa{
					color: #ff9f00;
				}
				.iconFontColor{
					color: #888;
				}
				
				.iconfont{
					font-size: 22px;
				}
			}
			
		}
	}
	//底部弹出层
	.u-popup{
		height: 80vh;
		.u-popup-top{
			text-align: center;padding:28rpx 30rpx;box-sizing: border-box;font-weight: bold;font-size: 15px;
		}
		.u-popup-seve{
			position: absolute;left: 36rpx;top:28rpx;font-size: 15px;color: #007AFF;
		}
		.center-list-item{
			display: flex;padding:20rpx 30rpx;align-items: center;line-height: 40rpx;box-sizing: border-box;width: 100%;
			.item-left{
				width:20px;height: 40rpx;padding:10rpx 20rpx;display: flex;align-items: center;justify-content: center;position: relative;
			}
			.item-right{
				font-size: 14px;box-sizing: border-box;width: 570rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: flex;
				.iconfont{
					color: #15bc84;margin-right: 5px;font-size: 20px;
				}
			}
		}
	}
	// 磁盘剩余
	.progress{
		display: flex;font-size: 12px;padding: 5px 15px;align-items: center;
		text{
			white-space: nowrap;color: #007AFF;font-weight: bold;
		}
	}
	
}
</style>
